<!DOCTYPE html>   <!--文档类型声明-->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/htmlCssSdudy.css">                <!--链接css-->
        <script src = "../js/htmlCssSdudy.js">  <!--链接js-->
        <!--可直接写javascript语句-->
        </script>

        <title>学习页面</title>
        <h1>一号大小标题</h1>
        <h2>二号大小标题</h2>
        <h3>三号大小标题</h3>
        <h4>四号大小标题</h4>
        <h5>五号大小标题</h5>

    </head>
    <!------------------------------------------------------------------------>
    <body>
        <div id="a4"></div><!--    显示模式：块 独占一行-->
        <span></span><!--    显示模式：行内 由内容撑开 加宽高不生效-->
        <img src="../res/imgs/p1.png" id="a5"><!--    显示模式：行内块 加宽高生效-->
        <div id="a2">
            <p>a2a2a2a2</p>
        </div>
        <div id="a3">
            <p>a3a3a3</p>
        </div>
        <p id="a1">aaaa</p>
        <p id="p1">hello,word</p>
        <p class="c1" title="标题2">hello,<b>加粗</b> <u>下划线</u> <i>倾斜</i> <s>删除线</s></p>

        <img src="DSC_7875.jpg" alt="图片错误时文字" title="鼠标悬停时文字">   <!--插入图片-->
<!--        <img src="data:image/png;base64,数据">        插入base64编码存储的图片-->
        <video src="" controls></video>                      <!--插入视频,controls表示可以播放,autoplay自动播放,loop循环播放 -->
        <audio src=""></audio>                              <!--插入音频,controls表示可以播放,autoplay自动播放,loop循环播放-->

        <a href="https://www.baidu.com/" target="_blank">目标网页地址名称</a>  <!--超链接,target="_blank"新页面  ="_self"当前页面-->
        <a href="boxCenter.html">同目录下网页</a>                <!--超链接-->
        <a href="#p1">页面内锚点</a>                          <!--超链接同一页面位置跳转-->

        <hr> <!--分隔线-->
        <br> <!--换行标签-->

        <ul>  <!--无序列表-->
            <li>无序列表项</li>
            <li>无序列表项2</li>
        </ul>

        <ol>  <!--有序列表 唯一可以包含其他内容的列表项-->
            <li>有序列表项</li>
            <li>有序列表项2</li>
        </ol>

        <dl>
            <dt>自定义列表项标题</dt>
            <dd>自定义列表项1</dd>
            <dd>自定义列表项2</dd>
        </dl>

        <table border="1px">
                <caption>表格标题</caption>
            <thead><!--表头-->
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody><!--表体-->
                <tr>
                    <td>刘</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td colspan="2">水平合并单元格</td>
<!--                    rowspan竖直合并单元格-->
                </tr>
            </tbody>
            <tfoot><!--表底-->
            </tfoot>
        </table>

            <form action="https://www.baidu.com/"
                method="post" enctype="multipart/form-data">         <!--表单用于提交给服务器-->
                <input type="text" name="wd" placeholder="账号">          <!--创建文本框与设置数据名称-->
                <input type="password" name="password" placeholder="密码"><!--创建密码框与设置数据名称-->
                <input type="hidden" name="id" value="1">            <!--创建隐藏框与数据赋值-->
                <input type="button" value="普通按钮">                 <!--普通按钮-->
                <input type="submit" value="提交按钮">                 <!--提交按钮-->
                <input type="reset" value="重置按钮">                   <!--重置按钮-->
<!--             <label for=""></label> 用于点文字也可选中-->
                <label for="nan">男</label> <input type="radio" name="sex" value="男" id="nan" checked>  <!--创建单选与设置数据赋值，check用于默认选中-->
                <label for="nv">女</label> <input type="radio" name="sex" value="女" id="nv">          <!--创建单选与设置数据赋值，check用于默认选中-->
                唱歌<input type="checkbox" name="hobby" value="唱歌">  <!--创建多选与设置数据赋值-->
                跳舞<input type="checkbox" name="hobby" value="跳舞">  <!--创建多选与设置数据赋值-->
                <input type="file" value="选择文件">                    <!--创建文件与设置数据名称-->
                <input type="file" value="多选文件" multiple>           <!--创建文件与设置数据名称-->
            </form>

            <select>
                <option>下拉内容1</option>
                <option>下拉内容2</option>
                <option selected>下拉内容3</option>
            </select>
            <textarea>文本域</textarea>

            <div>
            一行一个
            </div>

            <span>
            一行多个
            </span>

            <header>网页头部</header>
            <nav>导航栏</nav>
            <footer>网页底部</footer>
            <aside>侧边栏</aside>
            <section>网页区块</section>
            <article>网页文章</article>

            字符实体
            空格:&nbsp; 小于号:&lt; 大于号:&gt; 和号:&amp; 引号:&quot; 单引号:&apos; 分:&cent;
            磅:&pound; 元:&yen; 欧元:&euro; 小节:&sect; 版权:&copy;

            <div id="a6">  </div>
            <div id="a7"><div id="a8">中</div> </div>

<!--                浮动             -->
        <img src="../res/imgs/p1.png" id="a9">
        <p id="a10">aofugihsdvhioatjfkesjnfvhaweipofjkdfvopwarh;qtghfdzivklabwdtiaejdszsvdhauoewltjnbdjvzdioogiqjekwguyzuspol;tekbghdyivuposjlrgbkfduohaizpjlgbw3horieodspj;nbljehjwoirupagvjzlhipgouaejlkvnzljaeg</p>
        <div id="a13">
            <div class="b1" id="a11"></div>
            <div class="b1" id="a12"></div>
        </div>
<!--        清除浮动-->
    <div>
        <div class="top">
            <div class="left"></div><!--浮起状态-->
            <div class="right"></div><!--浮起状态-->
            <div class="clearfix"></div><!--子元素浮起时让下面元素不上移-->
        </div>
        <div class="bottom"></div>
    </div>

        <div>
            <div class="top clearfix"><!--子元素浮起时让下面元素不上移-->
                <div class="left"></div><!--浮起状态-->
                <div class="right"></div><!--浮起状态-->
            </div>
            <div class="bottom"></div>
        </div>

<!--相对定位        -->
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <div class="box">box</div>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <!-- 绝对定位        -->
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <div class="box2">box</div>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
        <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<!--        固定定位-->
        <div class="box3">box</div>

<!--   --   装饰   --    -->
<!--        基线元素对齐-->
        <img src="../res/imgs/p1.png" id="a14"><input type="text" id="a15"><input type="button" id="a16">
        <div id="a17">
            <img src="../res/imgs/p1.png" id="a18">
        </div>

<!-- 光标更改    -->
        <div id="a20" class="b2">小手光标</div>
        <div id="a21" class="b2">工字光标</div>
        <div id="a22" class="b2">十字光标</div>

<!--  圆角   -->
        <div id="a23" class="b2">圆角图形</div>

<!--溢出部分显示效果-->
        <div id="a24" class="b2">溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果溢出效果</div>

<!--  显示隐藏       -->
        <div id="a25" class="b2">
            <p id="a27">显示图片</p>
            <img src="../res/imgs/p1.png" id="a26"></img>
        </div>
<!--透明-->
        <div id="a28">
            <img src="../res/imgs/p1.png" id="a29">
        </div>

    </body>
</html>